<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简设计 | 简约而不简单</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        accent: '#10B981',
                        light: '#F8FAFC',
                        dark: '#1E293B'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-light text-dark font-sans antialiased">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full top-0 z-50 transition-custom bg-transparent">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-primary flex items-center gap-2">
                <i class="fa fa-cube"></i>
                <span>极简</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center gap-8">
                <a href="#home" class="font-medium hover:text-primary transition-custom">首页</a>
                <a href="#features" class="font-medium hover:text-primary transition-custom">特色</a>
                <a href="#about" class="font-medium hover:text-primary transition-custom">关于</a>
                <a href="#contact" class="font-medium hover:text-primary transition-custom">联系</a>
                <a href="#" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-full transition-custom">开始使用</a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto px-4 py-4 flex flex-col gap-4">
                <a href="#home" class="font-medium py-2 hover:text-primary transition-custom">首页</a>
                <a href="#features" class="font-medium py-2 hover:text-primary transition-custom">特色</a>
                <a href="#about" class="font-medium py-2 hover:text-primary transition-custom">关于</a>
                <a href="#contact" class="font-medium py-2 hover:text-primary transition-custom">联系</a>
                <a href="#" class="bg-primary hover:bg-primary/90 text-white px-5 py-3 rounded-full text-center transition-custom">开始使用</a>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2 space-y-6">
                    <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight">
                        简约设计，<br>
                        <span class="text-primary">极致体验</span>
                    </h1>
                    <p class="text-secondary text-lg md:text-xl text-balance">
                        我们专注于创造简约而不简单的数字体验，让每一个细节都恰到好处。
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 pt-4">
                        <a href="#" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full text-center font-medium transition-custom">
                            了解更多
                        </a>
                        <a href="#" class="border border-secondary hover:border-primary hover:text-primary px-8 py-3 rounded-full text-center font-medium transition-custom">
                            查看案例
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <img src="https://picsum.photos/id/1/600/400" alt="简约设计展示" class="rounded-xl shadow-2xl w-full h-auto object-cover transform hover:scale-[1.02] transition-custom">
                </div>
            </div>
        </div>
    </section>

    <!-- 品牌展示 -->
    <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
            <p class="text-center text-secondary mb-8">受到全球领先企业的信任</p>
            <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
                <div class="text-secondary opacity-60 hover:opacity-100 transition-custom text-2xl font-bold">品牌A</div>
                <div class="text-secondary opacity-60 hover:opacity-100 transition-custom text-2xl font-bold">品牌B</div>
                <div class="text-secondary opacity-60 hover:opacity-100 transition-custom text-2xl font-bold">品牌C</div>
                <div class="text-secondary opacity-60 hover:opacity-100 transition-custom text-2xl font-bold">品牌D</div>
                <div class="text-secondary opacity-60 hover:opacity-100 transition-custom text-2xl font-bold">品牌E</div>
            </div>
        </div>
    </section>

    <!-- 特色展示 -->
    <section id="features" class="py-20 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold">我们的核心优势</h2>
                <p class="text-secondary text-lg">简约设计背后的强大功能，为您的业务带来真正价值</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- 特色1 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-custom border border-gray-100">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-bolt text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">高效性能</h3>
                    <p class="text-secondary">优化的代码和资源，确保每一次交互都流畅迅速，提升用户体验。</p>
                </div>
                
                <!-- 特色2 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-custom border border-gray-100">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-mobile text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">响应式设计</h3>
                    <p class="text-secondary">完美适配各种设备屏幕，从手机到桌面电脑，始终保持最佳体验。</p>
                </div>
                
                <!-- 特色3 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-custom border border-gray-100">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-paint-brush text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">精美界面</h3>
                    <p class="text-secondary">精心设计的视觉元素，平衡美学与功能性，打造令人愉悦的界面。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2">
                    <img src="https://picsum.photos/id/20/600/400" alt="关于我们" class="rounded-xl shadow-lg w-full h-auto object-cover">
                </div>
                <div class="md:w-1/2 space-y-6">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold">关于我们</h2>
                    <p class="text-secondary text-lg">
                        我们是一支专注于简约设计的团队，相信少即是多的设计哲学。通过去除冗余，保留核心，我们创造出既美观又实用的数字产品。
                    </p>
                    <p class="text-secondary text-lg">
                        自2015年成立以来，我们已为超过200家企业提供了设计服务，帮助他们在数字世界中脱颖而出。
                    </p>
                    <div class="grid grid-cols-2 gap-6 pt-4">
                        <div>
                            <p class="text-4xl font-bold text-primary">50+</p>
                            <p class="text-secondary">专业设计师</p>
                        </div>
                        <div>
                            <p class="text-4xl font-bold text-primary">200+</p>
                            <p class="text-secondary">成功案例</p>
                        </div>
                        <div>
                            <p class="text-4xl font-bold text-primary">10年</p>
                            <p class="text-secondary">行业经验</p>
                        </div>
                        <div>
                            <p class="text-4xl font-bold text-primary">98%</p>
                            <p class="text-secondary">客户满意度</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-20 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold">联系我们</h2>
                <p class="text-secondary text-lg">有任何问题或需求？请随时与我们联系，我们将尽快回复您</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12">
                <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100">
                    <form class="space-y-6">
                        <div>
                            <label for="name" class="block text-sm font-medium mb-2">您的姓名</label>
                            <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring focus:ring-primary/20 outline-none transition-custom" placeholder="请输入您的姓名">
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium mb-2">电子邮箱</label>
                            <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring focus:ring-primary/20 outline-none transition-custom" placeholder="请输入您的邮箱">
                        </div>
                        <div>
                            <label for="message" class="block text-sm font-medium mb-2">留言内容</label>
                            <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring focus:ring-primary/20 outline-none transition-custom" placeholder="请输入您的留言"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-custom">
                            发送留言
                        </button>
                    </form>
                </div>
                
                <div class="flex flex-col justify-between">
                    <div class="space-y-8">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-map-marker text-primary text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold mb-1">公司地址</h3>
                                <p class="text-secondary">北京市朝阳区建国路88号现代大厦15层</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-phone text-primary text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold mb-1">联系电话</h3>
                                <p class="text-secondary">+86 10 8888 7777</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-envelope text-primary text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold mb-1">电子邮箱</h3>
                                <p class="text-secondary">contact@example.com</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-12">
                        <h3 class="text-lg font-bold mb-4">关注我们</h3>
                        <div class="flex gap-4">
                            <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary hover:text-white text-primary rounded-full flex items-center justify-center transition-custom">
                                <i class="fa fa-weixin"></i>
                            </a>
                            <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary hover:text-white text-primary rounded-full flex items-center justify-center transition-custom">
                                <i class="fa fa-weibo"></i>
                            </a>
                            <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary hover:text-white text-primary rounded-full flex items-center justify-center transition-custom">
                                <i class="fa fa-instagram"></i>
                            </a>
                            <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary hover:text-white text-primary rounded-full flex items-center justify-center transition-custom">
                                <i class="fa fa-linkedin"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="grid md:grid-cols-4 gap-8 mb-8">
                <div>
                    <a href="#" class="text-2xl font-bold flex items-center gap-2 mb-4">
                        <i class="fa fa-cube"></i>
                        <span>极简</span>
                    </a>
                    <p class="text-gray-400 mb-4">简约设计，极致体验，为您的品牌创造独特价值。</p>
                    <div class="flex gap-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-linkedin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition-custom">首页</a></li>
                        <li><a href="#features" class="text-gray-400 hover:text-white transition-custom">特色</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-white transition-custom">关于</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-custom">联系</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">服务</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">网站设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">UI/UX设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">品牌策划</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">数字营销</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">订阅通讯</h3>
                    <p class="text-gray-400 mb-4">订阅我们的通讯，获取最新动态和优惠信息。</p>
                    <form class="flex">
                        <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-dark">
                        <button type="submit" class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-custom">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 text-center text-gray-500">
                <p>&copy; 2023 极简设计工作室. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary hover:bg-primary/90 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-custom z-50">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        const backToTop = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', function() {
            if (window.scrollY > 50) {
                navbar.classList.add('bg-white', 'shadow-md');
                navbar.classList.remove('bg-transparent');
                
                backToTop.classList.remove('opacity-0', 'invisible');
                backToTop.classList.add('opacity-100', 'visible');
            } else {
                navbar.classList.remove('bg-white', 'shadow-md');
                navbar.classList.add('bg-transparent');
                
                backToTop.classList.add('opacity-0', 'invisible');
                backToTop.classList.remove('opacity-100', 'visible');
            }
        });
        
        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
            const icon = menuToggle.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            } else {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                // 关闭移动菜单（如果打开）
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                    const icon = menuToggle.querySelector('i');
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 回到顶部按钮
        backToTop.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
</body>
</html>